<style type="text/css">

    #konten {
        height: 200px;
        overflow: auto;
        border: 1px dashed black;
        display:inline-block;
    }

    #judul {
        width: 368px;
        border: 1px dashed black;
    }

    #gambar-thumb {
        border: 1px solid black;
        height: 100px;
        width: 100px;
        margin: 1em;
        margin-bottom: 0em;
        display: inline-block;
        clear: both;
    }

    #gambar-thumb:hover {
        border-color: red;
        cursor: pointer;
    }

    #gambar-banner {
        border: 1px solid black;
        width: 255px;
        height: 100px;
        margin: 1em;
        margin-bottom: 0em;
        display: inline-block;
        clear: both;
    }

    #gambar-banner:hover {
        border-color: red;
        cursor: pointer;
    }

    .container {
        margin-bottom: 1.4em;
    }

    .name {
    }

    .field {
        margin: 1em;
    }

    #simpanbutton {
        float: right;
    }
</style>
<div style="margin-top: 1em;">
    <div class="container">
        Lokasi 
        &nbsp;&nbsp;
        : <input type="text" id="lokasi" style="width: 18.5em;"/>
    </div>

    <div class="container" style="margin-bottom: 1.6em;">
        Tanggal :
        <input id="tglmulai" type="text" class="datepicker" style="width: 8em;" />
        &nbsp; s/d &nbsp;
        <input id="tglselesai" type="text" class="datepicker" style="width: 8em;" />
    </div>

    <div class="container">
        <h1 id="judul" class="title content-title">
            {masukkan judul kegiatan}
        </h1>
    </div>

    <div class="container">
        <div id="konten" class="content-textbox">
            {masukkan narasi kegiatan}
        </div>
    </div>

    <div class="container" style="margin-bottom: 0em;">
        <div style="display: inline-block;">
            <div>
                Thumbnail :
            </div>
            <div id="gambar-thumb" class="img-uploader"></div>
            <form class="img-uploader" action="<?php echo site_url("service/imageupload/thumb"); ?>" method="post" enctype="multipart/form-data"></form>
        </div>
        <div style="display: inline-block;">
            <div>
                Banner :
            </div>
            <div id="gambar-banner" class="img-uploader makethumb"></div>
            <form class="img-uploader" action="<?php echo site_url("service/imageupload/banner/true/255/100"); ?>" method="post" enctype="multipart/form-data"></form>
        </div>
    </div>

    <div class="container" style="margin-bottom: 5.2em; margin-right: 0.6em;">
        <button id="simpanbutton" onClick="javascript:saveForm();">Simpan</button>
    </div>

</div>
<script type="text/javascript">
            var defJudul, defKonten;
            $(document).ready(function() {
                $("#lokasi").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            url: "<?php echo site_url("service/autocompletesearch/locall"); ?>",
                            method: "POST",
                            dataType: "json",
                            data: {
                                keywords: request.term
                            },
                            success: function(data) {
                                response(data);
                            }
                        });
                    },
                    minLength: 2,
                    focus: function(event, ui) {
                        $("#lokasi").val(ui.item.label);
                        return false;
                    },
                    select: function(event, ui) {
                        $("#lokasi").val(ui.item.label);
                        $("#lokasi").blur();
                        return false;
                    }
                });
                createTitleEditor("h1#judul", function() {
                    defJudul = $("#judul").text();
                });
                createContentEditor("div#konten", function() {
                    defKonten = $("#konten").html();
                });
                $("h1#judul").focus(function() {
                    if ($("h1#judul").text() === defJudul) {
                        $("h1#judul").text("");
                    }
                });
                $("h1#judul").blur(function() {
                    if ($("h1#judul").text() === "") {
                        $("h1#judul").text(defJudul);
                    }
                });
                $("div#konten").focus(function() {
                    if ($("div#konten").html() === defKonten) {
                        $("div#konten").html("");
                    }
                });
                $("div#konten").blur(function() {
                    if ($("div#konten").html() === "") {
                        $("div#konten").html(defKonten);
                    }
                });
            });
            function saveForm() {

                // inquiry    
                var data = {
                    judul: $("#judul").text(),
                    konten: $("#konten").html(),
                    banner: $("#gambar-banner input[type='hidden']").val(),
                    thumb: $("#gambar-thumb input[type='hidden']").val(),
                    tglmulai: $("#tglmulai").val(),
                    tglselesai: $("#tglselesai").val(),
                    lokasi: $("#lokasi").val()
                };

                // validation
                var messages = [];
                var validated = true;
                var goFocus = true;
                //..
                if (data.judul === defJudul) {
                    messages.push("Isi Judul Kegiatan");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#judul";
                    }
                }
                if (data.konten === defKonten) {
                    messages.push("Isi Konten Kegiatan");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#konten";
                    }
                }
                if (!data.banner) {
                    messages.push("Upload gambar banner");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#gambar-banner";
                    }
                }
                if (!data.thumb) {
                    messages.push("Upload gambar thumbnail");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#gambar-thumb";
                    }
                }
                if (!data.tglmulai) {
                    messages.push("Isi tanggal mulai");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#tglmulai";
                    }
                }
                if (!data.tglselesai) {
                    messages.push("Isi tanggal selesai");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#tglselesai";
                    }
                }
                if (!data.lokasi) {
                    messages.push("Isi lokasi");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#lokasi";
                    }
                }

                if (validated) {
                    // send
                    $.ajax({
                        type: "POST",
                        url: "<?php echo site_url("kegiatan/saveKegiatan"); ?>",
                        data: data,
                        beforeSend: function(xhr) {
                            $("#simpanbutton").prop("disabled", true);
                        },
                        success: function(result, status, xhr) {
                            $("#simpanbutton").prop("disabled", false);
                            window.location = "<?php echo site_url("usercp/historykegiatan"); ?>";
                        },
                        error: function(xhr, status, error) {
                            $("#simpanbutton").prop("disabled", false);
                        }
                    });
                } else {
                    var message = "Gagal menyimpan, silahkan : ";
                    message += "<ul>";
                    for (var i = 0; i < messages.length; i++) {
                        message += "<li>" + messages[i] + "</li>";
                    }
                    message += "</ul>";
                    alert(message, "Perhatian");
                    $(goFocus).focus();
                    return false;
                }
            }
</script>